<!--菜单搜索-->
<script lang="ts" setup>
import {computed, ref} from 'vue'
import useRouteStore from '@/store/route.ts'
import {useRouter} from 'vue-router'

const isShowSearch = ref(false)
const searchMenu = ref('')
const router = useRouter()
const menuList = computed(() => useRouteStore().flatMenuListGet.filter((item: any) => !item.hidden))
const handleOpen = () => {
	isShowSearch.value = true
	searchMenu.value = ''
}

const filterNodeMethod = (queryString: string) => {
	return (restaurant: any) => {
		return (
			restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
		)
	}
}

const searchMenuList = (queryString: string, cb: any) => {
	const results = queryString ? menuList.value.filter(filterNodeMethod(queryString)) : menuList.value
	cb(results)
}

const handleClickMenu = (menuItem: any) => {
	searchMenu.value = ''
	if (menuItem.meta.link) {
		window.open(menuItem.meta.link, '_blank')
	} else {
		void router.push({path: menuItem.path})
	}
	isShowSearch.value = false
}
</script>

<template>
	<div class="layout-search-dialog">
		<i :class="'iconfont icon-sousuo'" class="toolBar-icon" @click="handleOpen"/>
		<el-dialog
			v-model="isShowSearch"
			:modal="false"
			:show-close="false"
			destroy-on-close
			fullscreen
			width="300px"
			@click="isShowSearch = false"
		>
			<div @click.stop>
				<el-autocomplete
					v-model="searchMenu"
					:fetch-suggestions="searchMenuList"
					placeholder="菜单搜索 ：支持菜单名称、路径"
					@select="handleClickMenu"
				>
					<template #prefix>
						<base-icon icon="Search"/>
					</template>
					<template #default="{ item }">
						<div v-if="item.menuType === 'M'">
							<base-icon :icon="item.meta.icon"/>
							<span> {{ item.meta.title }} </span>
						</div>
					</template>
				</el-autocomplete>
			</div>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped>
.layout-search-dialog {
	:deep(.el-dialog) {
		background: rgb(0 0 0 / 50%);
		border-radius: 0 !important;
		box-shadow: unset !important;

		.el-dialog__header {
			border-bottom: none !important;
		}
	}

	:deep(.el-autocomplete) {
		position: absolute;
		top: 100px;
		left: 50%;
		width: 550px;
		transform: translateX(-50%);
	}
}

.el-autocomplete__popper {
	.el-icon {
		position: relative;
		top: 2px;
		font-size: 16px;
	}

	span {
		margin: 0 0 0 10px;
		font-size: 14px;
	}
}
</style>
